<script>
    $(function(){
        update_stations();
        $( "#form_station" ).dialog({
            autoOpen: false,
            resizable: false,
            height:500,
            width:550,
            modal: true
         });
    });
    
    function update_stations(){
        $.getJSON('app/ajax/ajax_stations.php?action=liste', function(data) {
            $("#liste_stations").html("<thead>"
                +"<tr>"
                +"<td>ID</td>"
                +"<td>Nom</td>"
                +"<td>Adresse</td>"
                +"<td>Latitude</td>"
                +"<td>Longitude</td>"
                +"<td>Actions</td>"
                +"</tr>"
                +"</thead>"
            );
            $.each(data, function(i, item) {
                if(item.Statut=='1'){
                    var statut = "Désactiver";
                }
                else{
                    var statut = "Activer";
                }
                $("#liste_stations").append(
                    "<tr>"
                    +"<td>"+item.IdStation+"</td>"
                    +"<td>"+item.StationName+"</td>"
                    +"<td>"+item.StationAddress+"</td>"
                    +"<td>"+item.StationLatitude+"</td>"
                    +"<td>"+item.StationLongitude+"</td>"
                    +"<td><a class=\"btn\" onclick=\"modifier("+item.IdStation+", '"+escape(item.StationName)+"', '"+escape(item.StationAddress)+"', "+item.StationLatitude+", "+item.StationLongitude+")\">Modifier</a><a class=\"btn\" onclick=\"more_information("+item.IdStation+")\">Plus d'informations</a></td>"
                    +"</tr>"
                );
            });
            $('#liste_stations').dataTable({
                "bDestroy": true,
                "oLanguage": {
                    "sLengthMenu": "Voir _MENU_ résultats par page",
                    "sZeroRecords": "Aucun résultat trouvé - Désolé",
                    "sInfo": "_START_ - _END_ sur _TOTAL_",
                    "sInfoEmpty": "Showing 0 to 0 of 0 records",
                    "sInfoFiltered": "(filtered from _MAX_ total records)",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sLast": "Dernier",
                        "sNext": "Suivant",
                        "sPrevious": "Précedent"
                    },
                    "sSearch": "Rechercher"
                }
            });
        });
    }
    
    function more_information(id){
        window.location.replace("<?php echo html_entity_decode(Atomik::url('cache', array(
                    'route' => 'admin',
                    'action_admin' => 'station'
                ))) ?>&id="+id);
    }
    
    function modifier(id, nom, adresse, latitude, longitude){
        $("#id").val(id);
        $("#formulaire_name").html("Modifier un abonnement");
        $("#button").html("<a class=\"btn\" onclick=\"validate_modifier()\">Modifier</a>");
        $("#nom").val(unescape(nom));
        $("#adresse").val(unescape(adresse));
        $("#latitude").val(latitude);
        $("#longitude").val(longitude);
        $("#form_station").dialog('open');
    }
    
    function validate_modifier(){
        var data = "action=modifier&id="+$("#id").val()+
                "&nom="+addslashes($("#nom").val())+
                "&adresse="+addslashes($("#adresse").val())+
                "&latitude="+$("#latitude").val()+
                "&longitude="+$("#longitude").val();
        ajax_stations(data);
    }
    
    function addslashes (str) {
        return (str + '').replace(/[\\"']/g, '\\$&').replace(/\u0000/g, '\\0');
    }
    
    function ajax_stations(data){
        $.ajax({
            type: 'GET',
            url: 'app/ajax/ajax_stations.php',
            data: data,
            success: function(result){
                $("#id").val('');
                $("#nom").val("");
                $("#adresse").val('');
                $("#latitude").val('');
                $("#longitude").val('');
                $("#formulaire_name").html('');
                $("#button").html('');
                $("#form_station").dialog('close');
                update_stations();
            }
        });
    }
    
    function view_ajouter(){
        $("#id").val('');
        $("#formulaire_name").html("Ajouter une station");
        $("#button").html("<a class=\"btn\" onclick=\"validate_ajouter()\">Ajouter</a>");
        $("#nom").val('');
        $("#adresse").val('');
        $("#latitude").val('');
        $("#longitude").val('');
        $("#form_station").dialog('open');
    }
    
    function validate_ajouter(){
        var data = "action=ajouter&nom="+addslashes($("#nom").val())+
                "&adresse="+addslashes($("#adresse").val())+
                "&latitude="+$("#latitude").val()+
                "&longitude="+$("#longitude").val();
        ajax_stations(data);
    }
</script>
<div id="form_station">
    <h3 id="formulaire_name"></h3>
    <input type="hidden" id="id">
    <label>Nom</label><input type="text" id="nom" maxlength="100">
    <label>Adresse</label><input type="text" id="adresse" maxlength="100">
    <label>Latitude</label><input type="text" id="latitude">
    <label>Longitude</label><input type="text" id="longitude">
    <br />
    <span id="button"></span>
</div>
<h1>Gestion des stations</h1>
<a class="btn" onclick="view_ajouter()">Ajouter une station</a>
<br />
<br />
<table style="width: 100%" id="liste_stations"></table>